// src/store/home.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
// import baseApi from '@/api/base'

// createAsyncThunk 是一个由 Redux Toolkit 提供的函数，用于创建处理异步操作的 thunk action creator。使用 createAsyncThunk 可以简化 Redux 中处理异步操作的流程，使代码更加清晰、简洁

// 异步操作1
// export const loadGoods = createAsyncThunk(
//     'home/fetchGoods',
//     (data, thunkAPI) => {
//         // thunkAPI：一个对象，其中包含通常传递给 Redux thunk 函数的所有参数，以及其他选项(参考：https://redux-toolkit.js.org/api/createAsyncThunk#payloadcreator)
//         baseApi.findGoods(data).then(res => {
//             thunkAPI.dispatch(setGoods(res.result))
//         })
//     }
// )

// 异步操作2
// export const loadGoods2 = createAsyncThunk(
//     'fetchGoods2',
//     (data, thunkAPI) => {
//         return baseApi.findGoods(data).then(res => res.result)
//     }
// )

// 使用createSlice方法创建一个slice。每一个slice里面包含了reducer和actions，实现模块化的封装
export const homeSlice = createSlice({
    // 命名空间
    name: 'home',
    // state数据的初始值
    initialState: {
        sortList: [
            { label: '食品类', value: '食品类' },
            { label: '服装类', value: '服装类' },
            { label: '日用品类', value: '日用品类' },
        ],
        goodsData: [],
        initName: '',
        isFullScreen: false,
    },
    // 定义的action。由于内置了immutable插件，可以直接使用赋值的方式进行数据的改变
    reducers: {
        changeVal: (state, action) => {
            // 第一个参数 state为当前state中的数据
            // 第二个参数 action为 {payload: [{ label: '家具类', value: '家具类' }], type: "dic/changeVal"}
            // payload 为传过来的新参数值
            // type 为action触发类型
            console.log('changeVal:', JSON.parse(JSON.stringify(state)), state, action)
            state.sortList = action.payload
        },
        setGoods: (state, action) => {
            state.goodsData = action.payload
        },
        setName: (state, action) => {
            // 第一个参数 state为当前state中的数据
            // 第二个参数 action为 {payload: [{ label: '家具类', value: '家具类' }], type: "dic/changeVal"}
            // payload 为传过来的新参数值
            // type 为action触发类型
            console.log('changeVal:', JSON.parse(JSON.stringify(state)), state, action)
            state.initName = action.payload
        },
        changeIsFullScreen: (state, action) => {
            state.isFullScreen = !state.isFullScreen
        },
    },
    // extraReducers: {
    //     // 异步函数成功fulfilled时回调(类似的还有pending等待、rejected拒绝，此处只列举成功态) 
    //     [loadGoods2.fulfilled](state, action) {
    //         state.goodsData = action.payload
    //     },
    // }
})

export const { changeVal, setGoods, setName, changeIsFullScreen } = homeSlice.actions

export default homeSlice.reducer